<template>
    <div class="homeContainer" ref="imgBox" style="height: 100%; width: 100%">
        <div
            class="cutArea"
            :style="{ width: cutAreaWidth + 'rem', height: cutAreaHeight + 'rem' }"
            v-show="showCutArea"
            @mousedown="dragDiv($event)"
            ref="areaBox"
            id="Drag"
        ></div>
        <div
            class="cutArea1"
            :style="{
                width: cutAreaWidth + 'rem',
                height: cutAreaHeight + 'rem',
                cursor: currentCursor,
            }"
            v-show="showMakePic"
            @mousedown="dragDiv1($event)"
            @mouseup="setCursorToGrab"
            @mouseleave="setCursorToGrab"
            ref="areaBox1"
            id="Drag1"
        >
            <div class="titleArea">
                <input
                    type="text"
                    class="mainTitleInput"
                    v-model="mainTitleInput"
                    @blur="updateMainTitle"
                    placeholder="请输入主标题"
                    v-show="showInputTitle"
                />
                <div
                    v-show="!showInputTitle"
                    class="mainTitle"
                    :style="{ fontSize: picInfoSet.mainTitlePixel + 'px' }"
                >
                    {{ picInfoSet.mainTitle }}
                </div>
                <div class="subTitle" :style="{ fontSize: picInfoSet.subTitlePixel + 'px' }">
                    {{ picInfoSet.subTitle }}
                </div>
            </div>

            <div class="mapArea">
                <div
                    class="mapBorder"
                    :style="{
                        width: cutAreaWidth * 0.8 + 'rem',
                        height: cutAreaHeight * 0.75 + 'rem',
                    }"
                >
                    <div class="legendPanel">
                        <img src="@/assets/legend/legend.png" alt="" />
                    </div>
                </div>
            </div>
            <div class="bottomArea">
                <div class="bottomContent">
                    {{ picInfoSet.bottomContent }}
                </div>
                <div class="bottomPlatform">
                    {{ picInfoSet.bottomPlatform }}
                </div>
            </div>
        </div>

        <div class="picShowCut" v-show="showCutArea">
            <div class="title">
                <div class="bar"></div>
                <div class="title-text">截屏打印</div>
                <div class="title-right" @click="handleDialog">x</div>
            </div>
            <div class="content">
                <div class="areaScale">
                    宽:
                    <input
                        type="number"
                        placeholder="宽"
                        v-model="dragWidth"
                        @input="updateCutAreaSize"
                    />
                    长:
                    <input
                        type="number"
                        placeholder="长"
                        v-model="dragHeight"
                        @input="updateCutAreaSize"
                    />
                </div>
                <div class="picCutBtn">
                    <button @click="startCut">截图</button>
                    <button @click="printPic">打印</button>
                </div>
            </div>
        </div>
        <div class="picShowCut" v-show="showMakePic">
            <div class="title">
                <div class="bar"></div>
                <div class="title-text">制图打印</div>
                <div class="title-right" @click="handleDialog">x</div>
            </div>

            <div class="content">
                <div class="areaScale">
                    宽:
                    <input
                        type="number"
                        placeholder="宽"
                        v-model="dragWidth"
                        @input="updateCutAreaSize"
                    />
                    长:
                    <input
                        type="number"
                        placeholder="长"
                        v-model="dragHeight"
                        @input="updateCutAreaSize"
                    />
                </div>
                <div class="picCutBtn">
                    <button @click="startCut">制图</button>
                    <button @click="printPic">打印</button>
                </div>
            </div>
        </div>
        <TopBar id="TopBar" style=""></TopBar>
        <div
            class="contentContainer"
            style="width: 100%; height: 100%; position: relative"
            ref="imgBox"
        >
            <div
                id="map-container"
                style="width: 100%; height: 100%"
                @contextmenu.prevent="showContextMenu($event)"
                @click="hideContextMenu"
            ></div>
        </div>
        <MapTool></MapTool>
        <MapLegend
            :dialogVisible="isMapLegendShow"
            @update:dialogVisible="isMapLegendShow = $event"
        />
        <div class="copyRightItem" v-if="showMenu" :style="contextMenuStyle">
            <button class="copy-button" @click="copyCoor">复制坐标</button>
            <button @click="userDeviceAttach" v-if="isUserDeviceAttach">用户设备挂接</button>
        </div>
        <vavleManageForm v-show="showValveOperate"></vavleManageForm>
        <SaveAnalysis v-show="showSaveAnalysis"></SaveAnalysis>
    </div>
</template>

<script>
import { getUserInfo } from '@/api/login';
import 'moment/locale/zh-cn';
import moment from 'moment';
import TapMap from '../map/index.js';
import html2canvas from 'html2canvas';
import TopBar from './TopBar.vue';
import MapTool from './MapTool/MapTool.vue';
import ImageLayer from 'ol/layer/Image';
import { markRaw } from 'vue';
import dmgis from '@/api/dmgis';
import ClipboardJS from 'clipboard';
import SaveAnalysis from '../views/PipelineAnalysis/component/SaveAnalysis.vue'
import MapLegend from '../views/SystemTool/components/MapLegend.vue';
import vavleManageForm from '../views/PipelineAnalysis/component/valveManageForm.vue';
import { transform, useGeographic, Projection, addProjection } from 'ol/proj';
export default {
    name: 'HomePage',
    components: {
        SaveAnalysis,
      vavleManageForm,
        TopBar,
        MapLegend,
        MapTool,
    },
    data() {
        return {
            vavleManageForm,
            isUserDeviceAttach: false,
            showMenu: false,
            currentCursor: 'grab',
            dmProjectLayer: null,
            dmserurl: process.env.VUE_APP_BASE_API + '/dmgis',
            //当前编辑实体的索引号
            currentindex: null,
            showInputTitle: true,
            mainTitleInput: '', // 用户输入的标题
            picInfoSet: {
                mainTitle: '专题图',
                subTitle: '',
                bottomContent: '',
                bottomPlatform: '',
                leftTop: '118.6135 44.7958',
                rightBottom: '120.6573 45.988',
                mainTitlePixel: 35,
                subTitlePixel: 24,
                legendPixel: 18,
            },
            legendItemGroup: {
                colorItemGroup: [
                    '#ffffff',
                    '#a6f28f',
                    '#3dba3d',
                    '#61b8ff',
                    '#0000ff',
                    '#ff00ff',
                    '#800040',
                ],
                numItemGroup: ['0.1', '6', '15', '30', '60', '150'],
            },
            TapMap: null,
            dragWidth: '60',
            dragHeight: '40',
            cutAreaWidth: '50',
            cutAreaHeight: '35',
            DragEl: null, //拖动元素
            DragEl1: null, //拖动元素
            dragContainerEl: null, //容器元素
            // 位置差
            disX: 0,
            disY: 0,
            contextMenuStyle: {
                left: '0px',
                top: '0px',
            },
            coordinate: {},
        };
    },
    computed: {
        isMapLegendShow() {
            return this.$store.state.mapLegendShow;
        },
        showValveOperate() {
      return this.$store.getters.showValveOperate;
    },
    showSaveAnalysis(){
        return this.$store.getters.showSaveAnalysis;
    },
        showCutArea() {
            return this.$store.state.showCutArea; // 从 Vuex 获取状态
        },
        showMakePic() {
            return this.$store.state.showMakePic; // 从 Vuex 获取状态
        },
    },
    methods: {
    handleDialog(){
      this.$store.commit("setShowCutArea", false);
          this.$store.commit("setShowMakePic", false);
    },
        userDeviceAttach() {},
        copyCoor() {
            if (this.coordinate) {
                const textToCopy = `${this.coordinate.X},${this.coordinate.Y}`;
                new ClipboardJS('.copy-button', {
                    text: () => textToCopy,
                });
                this.$message({ message: '复制成功', type: 'success' });
            }
            this.hideContextMenu();
        },
        showContextMenu(event) {
            this.coordinate = this.$store.state.coordinate;
            this.showMenu = true;
            this.contextMenuStyle.left = `${event.pageX + 5}px`;
            this.contextMenuStyle.top = `${event.pageY + 5}px`;
        },
        hideContextMenu() {
            this.showMenu = false;
        },
        initMap() {
            this.TapMap = new TapMap('map-container');
            this.TapMap.panTo([312620.71, 658546.3], 14);
            this.TapMap.layer.initLayer();
            //调用DMGIS地图服务
            // let projection_szbj54 = new Projection({
            //   code: "szbj54",
            //   units: "m",
            // });
            let projection_szbj54 = new Projection({
                code: 'sz2000',
                units: 'm',
            });
            this.dmProjectLayer = new dmgis.olmap.ServiceLayer('TapWaterMap', this.dmserurl, {
                maxZoom: 18,
                minZoom: 0,
                opacity: 1,
                projection: projection_szbj54,
            });
            this.dmProjectLayer.InitService().then(res => {
                let layersAttribute = res.layers.map(item => {
                    return item.name;
                });
                console.log(layersAttribute, 'tapwater服务图层');
                this.$store.commit('setLayersAttribute', layersAttribute);
            });

            //创建点线面时回调
            dmgis.olmap.ServiceLayer.prototype.HandleBuildInfo = function (feature) {
                this.currentindex = feature.index;
            };
            this.$store.commit('setProjectLayer', markRaw(this.dmProjectLayer));
            //将地图对象由vuex管理
            this.$store.commit('setMap', markRaw(this.TapMap));
        },
        updateMainTitle() {
            this.picInfoSet.mainTitle = this.mainTitleInput; // 更新主标题
            this.showInputTitle = false;
        },
        //添加工程地图
        addDmProject() {
            this.dmProjectLayer.serviceLayer = new ImageLayer({ zIndex: 999 });
            this.TapMap.map.addLayer(this.dmProjectLayer.serviceLayer);
            var serviceLayer = this.dmProjectLayer.serviceLayer;

            this.dmProjectLayer.RefreshMap(serviceLayer, this.dmProjectLayer.ImgMapService, 2);
            var self = this;
            this.TapMap.map.on('moveend', function (evt) {
                let frameState = evt.frameState;
                let imgSvrParam = self.dmProjectLayer.ImgMapService;
                // imgSvrParam.DispRect.minx = 47502.3425;
                // imgSvrParam.DispRect.miny = 28025.4831;
                // imgSvrParam.DispRect.maxx = 57609.0837;
                // imgSvrParam.DispRect.maxy = 40934.258;
                imgSvrParam.DispRect.minx = frameState.extent[0];
                imgSvrParam.DispRect.miny = frameState.extent[1];
                imgSvrParam.DispRect.maxx = frameState.extent[2];
                imgSvrParam.DispRect.maxy = frameState.extent[3];
                imgSvrParam.imgWid = frameState.size[0];
                imgSvrParam.imgHig = frameState.size[1];
                self.dmProjectLayer.RefreshMap(
                    serviceLayer,
                    imgSvrParam,
                    frameState.viewState.zoom
                );
            });
            this.dmProjectLayer.serviceLayer.setVisible(false);
            dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (feature) {};
            // //获取点线面要素
            // this.refreshPoints();
            // this.refreshLines();
            // this.refreshPolygons();
        },
        //刷新点
        refreshPoints() {
            //获取点要素
            var self = this;
            dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (feature) {
                self.indexarrPoint = feature.objset;
            };
            let getfeaturePoint = this.dmProjectLayer.GetFeatureMapService('pointer');
            this.dmProjectLayer.SendFeatureMapService(getfeaturePoint);
        },
        //刷新线
        refreshLines() {
            //获取线要素
            var self = this;
            dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (feature) {
                self.indexarrLine = feature.objset;
            };
            let getfeatureLine = this.dmProjectLayer.GetFeatureMapService('line');
            this.dmProjectLayer.SendFeatureMapService(getfeatureLine);
        },
        //刷新面
        refreshPolygons() {
            //获取面要素
            var self = this;
            dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo = function (feature) {
                self.indexarrPolygon = feature.objset;
            };
            let getfeatureLine = this.dmProjectLayer.GetFeatureMapService('area');
            this.dmProjectLayer.SendFeatureMapService(getfeatureLine);
        },
        setCursorToGrab() {
            this.currentCursor = 'grab';
        },
        updateCutAreaSize() {
            // 更新cutArea的大小，同时确保宽高为正数或默认值
            this.cutAreaHeight = this.dragHeight > 0 ? this.dragHeight : 200;
            this.cutAreaWidth = this.dragWidth > 0 ? this.dragWidth : 200;
        },
        dragDiv(event) {
            // 1,计算位置差
            this.disX = event.clientX - this.DragEl.offsetLeft;
            this.disY = event.clientY - this.DragEl.offsetTop;
            //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
            let dragHeight = this.DragEl.offsetHeight;
            let dragWidth = this.DragEl.offsetWidth;
            let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度
            let dragContainerHeight = this.dragContainerEl.offsetHeight;
            // 添加鼠标移动事件
            document.onmousemove = el => {
                // 3，获取鼠标移动位置
                let moveX = el.clientX - this.disX;
                let moveY = el.clientY - this.disY;
                // 左边界
                if (moveX <= 0) {
                    moveX = 0;
                }
                // 上边界
                if (moveY <= 0) {
                    moveY = 0;
                }
                //下边界  容器高度 - 拖动元素高度
                if (moveY >= dragContainerHeight - dragHeight) {
                    moveY = dragContainerHeight - dragHeight;
                }
                //右边界   容器宽度 - 拖动元素宽度
                if (moveX >= dragContainerWidth - dragWidth) {
                    moveX = dragContainerWidth - dragWidth;
                }
                // 5, 开始移动
                this.DragEl.style.left = moveX + 'px';
                this.DragEl.style.top = moveY + 'px';
            };
            document.onmouseup = () => {
                document.onmousemove = null;
            };
        },
        dragDiv1(event) {
            // 1,计算位置差
            this.disX = event.clientX - this.DragEl1.offsetLeft;
            this.disY = event.clientY - this.DragEl1.offsetTop;
            //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
            let dragHeight = this.DragEl1.offsetHeight;
            let dragWidth = this.DragEl1.offsetWidth;
            let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度
            let dragContainerHeight = this.dragContainerEl.offsetHeight;
            // 添加鼠标移动事件
            document.onmousemove = el => {
                // 3，获取鼠标移动位置
                let moveX = el.clientX - this.disX;
                let moveY = el.clientY - this.disY;
                // 左边界
                if (moveX <= 0) {
                    moveX = 0;
                }
                // 上边界
                if (moveY <= 0) {
                    moveY = 0;
                }
                //下边界  容器高度 - 拖动元素高度
                if (moveY >= dragContainerHeight - dragHeight) {
                    moveY = dragContainerHeight - dragHeight;
                }
                //右边界   容器宽度 - 拖动元素宽度
                if (moveX >= dragContainerWidth - dragWidth) {
                    moveX = dragContainerWidth - dragWidth;
                }
                // 5, 开始移动
                this.DragEl1.style.left = moveX + 'px';
                this.DragEl1.style.top = moveY + 'px';
            };
            document.onmouseup = () => {
                document.onmousemove = null;
            };
        },
        async printPic() {
            // 首先对地图内容map-container进行截图
            let imgBox = this.$refs.imgBox; //refimgBox
            if (imgBox.offsetWidth === 0 || imgBox.offsetHeight === 0) {
                console.error('imgBox has zero width or height');
                return;
            }
            let scale = window.devicePixelRatio;
            let mapCanvas = await html2canvas(imgBox, {
                useCORS: true,
                allowTaint: false,
                scale: scale,
                dpi: scale,
                ignoreElements: element => {
                    // 遍历imgBox下的每个元素节点，截图时忽略指定元素
                    if (
                        element.classList.contains('toolDialog') ||
                        element.classList.contains('map-tool') ||
                        element.classList.contains('o-title') ||
                        element.classList.contains('makePicPrintContainer') ||
                        element.classList.contains('picShowCut')
                    ) {
                        return true;
                    }
                },
            });

            // 获取截图框选的位置和尺寸
            let areaBox;
            if (this.showMakePic) {
                areaBox = this.$refs.areaBox1;
            } else if (this.showCutArea) {
                areaBox = this.$refs.areaBox;
            }
            // let areaBox = this.$refs.areaBox;
            let areaBoxRect = areaBox.getBoundingClientRect();

            // 根据 areaBox 的位置和尺寸，在 mapCanvas 上裁剪出对应的区域
            let cropCanvas = document.createElement('canvas');
            cropCanvas.width = areaBoxRect.width;
            cropCanvas.height = areaBoxRect.height;
            let cropCtx = cropCanvas.getContext('2d');
            cropCtx.drawImage(
                mapCanvas,
                areaBoxRect.left - imgBox.getBoundingClientRect().left, // 计算相对偏移
                areaBoxRect.top - imgBox.getBoundingClientRect().top,
                areaBoxRect.width,
                areaBoxRect.height,
                0,
                0,
                areaBoxRect.width,
                areaBoxRect.height
            );

            // 触发打印裁剪后的图片
            this.printCanvas(cropCanvas);
        },
        async startCut() {
            // 首先对地图内容map-container进行截图
            let scale = window.devicePixelRatio;
            let imgBox = this.$refs.imgBox; //refimgBox
            let mapCanvas = await html2canvas(imgBox, {
                useCORS: true,
                allowTaint: false,
                scale: scale,
                dpi: scale,
                ignoreElements: element => {
                    // 遍历imgBox下的每个元素节点，截图时忽略指定元素
                    if (
                        element.classList.contains('toolDialog') ||
                        element.classList.contains('map-tool') ||
                        element.classList.contains('o-title') ||
                        element.classList.contains('makePicPrintContainer') ||
                        element.classList.contains('picShowCut')
                    ) {
                        return true;
                    }
                },
            }); // 检查canvas尺寸
            // 获取截图框选的位置和尺寸
            let areaBox;
            if (this.showMakePic) {
                areaBox = this.$refs.areaBox1;
            } else if (this.showCutArea) {
                areaBox = this.$refs.areaBox;
            }

            let areaBoxRect = areaBox.getBoundingClientRect();
            // // 根据 areaBox 的位置和尺寸，在 mapCanvas 上裁剪出对应的区域
            // // let ctx = mapCanvas.getContext("2d");
            let cropCanvas = document.createElement('canvas');
            cropCanvas.width = areaBoxRect.width;
            cropCanvas.height = areaBoxRect.height;
            let cropCtx = cropCanvas.getContext('2d');
            // 将需要裁剪的区域绘制到新的 canvas 上
            cropCtx.drawImage(
                mapCanvas,
                areaBoxRect.left - imgBox.getBoundingClientRect().left, // 计算相对偏移
                areaBoxRect.top - imgBox.getBoundingClientRect().top,
                areaBoxRect.width,
                areaBoxRect.height,
                0,
                0,
                areaBoxRect.width,
                areaBoxRect.height
            );
            // 触发下载裁剪后的图片
            const link = document.createElement('a');
            link.download = 'Button.png';
            link.href = cropCanvas.toDataURL();
            link.click();
        },

        printCanvas(canvas) {
            const printContent = canvas.toDataURL('image/png');
            const printWindow = window.open('', '_blank');
            const htmlContent = `
          <html>
            <head>
              <title>截屏打印</title>
              <style>
                @media print {
                  /* 打印页的CSS样式 */
                  * {
                    padding: 0;
                    margin: 0;
                  }

                  ul {
                    text-decoration: none;
                    list-style-type: none;
                    text-decoration: underline;
                    font-weight: bold;
                  }
                }
              </style>
            </head>
            <body>
               <img src="${printContent}" alt="打印图片">
            </body>
          </html>
        `;
            printWindow.document.write(htmlContent);
            printWindow.document.close();
            printWindow.onload = () => {
                printWindow.print();
                printWindow.close();
            };
        },
        addTileLayer() {
            // this.TapMap.layer.getTileMapByUrl(
            //   "/data/pipline",
            //   "piplineTile_true",
            //   [46101.32565, 28025.4831, 59010.10055, 40934.258],
            //   1
            // );
            // this.TapMap.layer.getTileMapByUrl(
            //   "/data/pipline_4",
            //   "piplineTile",
            //   [46101.325650,28025.483100,59010.100550, 40934.258000],
            //   1
            // );
            // this.TapMap.layer.getTileMapByUrl(
            //   "/data/pipline_4",
            //   "piplineTile",
            //   [46101.325650,28025.483100,59010.100550,40934.258000],
            //   1
            // );
            // this.TapMap.layer.setWmsLayer(
            //   "TapWater:adapter_Info-center",
            //   "testLayer"
            // );
            // this.TapMap.layer.setWmsLayer(
            //   "TapWater:pipeline0-74mm-center",
            //   "testLayer"
            // );
            // this.TapMap.layer.setWmsLayer("TapWater:adapter_Info-taihu", "testLayer");
            // this.TapMap.layer.setWmsLayer(
            //   "TapWater:pipeline300-499mm-taihu",
            //   "testLayer"
            // );
            // this.TapMap.layer.setWmsLayer(
            //   "TapWater:pipeline300-499mm-center",
            //   "testLayer"
            // );
            // this.TapMap.layer.setWmsLayer("pipeline75-299mm-taihu", "testLayer");
            // this.TapMap.layer.setWmsLayer("pipeline75-299mm-center", "testLayer");
        },
    },
    mounted() {
        if (!JSON.parse(localStorage.getItem('userInfo'))) {
            this.$message.error('未登录，即将跳转至首页');
            localStorage.clear();
            this.$router.push('/');
        }
        let userName = JSON.parse(localStorage.getItem('userInfo')).username;

        getUserInfo({
            username: userName,
        }).then(res => {
            localStorage.setItem('userInfo', JSON.stringify(res.data));
        });
        this.initMap();
        this.DragEl = document.getElementById('Drag');
        this.DragEl1 = document.getElementById('Drag1'); //拖拽的元素
        this.dragContainerEl = document.getElementsByClassName('content'); //拖拽的父元素
        moment.locale('zh-cn');
        this.picInfoSet.bottomContent = moment(new Date()).format('YYYY年MM月DD日');
        // setInterval(() => {
        //   moment.locale('zh-cn');
        //   this.picInfoSet.bottomContent = moment(new Date()).format(
        //     'YYYY年MM月DD日 HH:mm:ss'
        //   );
        // }, 1000);
        this.addDmProject();
        this.addTileLayer();
        this.$store.commit('addTreeDefault', '管网地图');
    },
};
</script>

<style lang="scss" scoped>
.cutArea {
    // width: 60rem;
    // height: 45rem;

    position: absolute;
    border-radius: 10px;
    border: 3px dashed rgb(0, 0, 0);
    z-index: 1;
    left: 15rem;
    top: 7rem;
}
.cutArea1 {
    // width: 60rem;
    // height: 45rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 5px;
    border: 3px dashed rgb(0, 0, 0);
    z-index: 1;
    left: 19rem;
    top: 8rem;
    overflow: hidden;
    .titleArea {
        position: absolute;
        top: 0;
        width: 100%;
        height: 12%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        .mainTitleInput {
            margin-top: 1rem;
            font-size: 1rem;
        }
        .mainTitle {
            // font-size: xx-large;
            font-size: var(--dynamic-font-size);
        }
        .subTitle {
            color: #666666;
            font-size: x-large;
        }
    }
    .bottomArea {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 10%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 20%;
        .bottomContent {
            display: flex;
            flex-direction: row;
            .legend {
                .colorItem {
                    display: flex;
                    .colorBox {
                        width: 30px;
                        height: 15px;
                    }
                }
                .numItem {
                    display: flex;
                    gap: 6%;
                }
            }
        }
    }

    .mapArea {
        border: 100vw solid #fff;
        .mapBorder {
            border: 2px solid #7f7f7f;
            .legendPanel {
                position: relative;

                height: 100%;
                width: 100%;
                img {
                    width: 12rem;

                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
}
.picShowCut {
    position: absolute;

    background: #285383;
    z-index: 3;
    top: 11.5rem;
    right: 3rem;
    z-index: 999;
    .title {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 18px;
        .bar {
            width: 5px; /* 小竖条的宽度 */
            height: 20px; /* 小竖条的高度 */
            background-color: white; /* 小竖条的颜色 */
            margin: 10px; /* 小竖条和文字之间的间距 */
        }
        .title-right {
            margin-left: 55%;
            margin-top: -0.5rem;
        }
    }
    .content {
        padding: 1.5rem;
        button {
            width: 90px;
            margin: 0 5px;
            color: #fff;
            background-color: #3c83c8;
            border-radius: 2px;
            cursor: pointer;
        }
        .picCutBtn {
            right: 5vw;
            display: flex;
            top: 2vw;
        }

        .areaScale {
            right: 2vw;
            top: -4vh;
            margin-bottom: 1.5rem;
            color: #fff;
            display: inline-block;
            input {
                width: 50px;
                margin: 0px 7px;
                color: #fff;
                background-color: rgb(60, 100, 133);
                border-radius: 2px;
                border: 1px solid #ccc;
                text-align: center;
            }
        }
    }
}

button {
    border: none !important;
}
button:active,
button:focus {
    outline: none;
    border: none;
}
.copyRightItem {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    button {
        background: transparent;
        border-radius: 2px;
        cursor: pointer;
        text-align: left;
    }
    button:hover {
        background: #ccc;
    }
}
</style>
